<template>
  <el-dialog
    :close-on-click-modal="false"
    title="项目详情"
    :visible.sync="showsDetail"
    :before-close="cancel"
    width="92%"
    top="5vh"
    lock-scroll
    :append-to-body="true"
  >
    <div class="edit-form">
      <el-form status-icon :model="datas" ref="editDetail">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item
              prop="project_no"
              label="项目编号："
              :label-width="baseStyle.width"
            >
              <div>{{ datas.project_no }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="project_name"
              label="项目名称："
              :label-width="baseStyle.width"
            >
              <div>{{ datas.project_name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="class_name"
              label="项目类别："
              :label-width="baseStyle.width"
            >
              <div>{{ datas.class_name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="project_level"
              label="优先级别："
              :label-width="baseStyle.width"
            >
              <div>{{ datas.project_level }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="project_pm_name"
              label="项目经理："
              :label-width="baseStyle.width"
            >
              <div>{{ datas.project_pm_name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="project_skiller_name"
              label="技术负责人："
              :label-width="baseStyle.width"
            >
              <div>{{ datas.project_skiller_name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              prop="teamData"
              label="团队成员："
              :label-width="baseStyle.width"
            >
              <div class="dev-test">
                <span v-for="item in datas.teamData" :key="item.id">{{
                  item.realname
                }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              prop="month_plan"
              label="本月计划："
              :label-width="baseStyle.width"
            >
              <div
                class="dev-test"
                v-html="datas.month_plan ? datas.month_plan : '暂无计划'"
              >
                <!-- <span>{{datas.month_plan?datas.month_plan:"暂无计划"}}</span> -->
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              prop="project_des"
              label="项目描述："
              :label-width="baseStyle.width"
            >
              <div>{{ datas.project_des }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              prop="fileList"
              label="项目资料："
              :label-width="baseStyle.width"
            >
              <div v-for="file in fileList" :key="file.path">
                <a
                  style="color: #409eff"
                  target="_bank"
                  :href="file.downLoade"
                  >{{ file.name }}</a
                >
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              prop="currentStage"
              label="项目阶段："
              :label-width="baseStyle.width"
            >
              <el-steps
                :active="datas.currentStageNum * 1"
                align-center
                finish-status="success"
              >
                <el-step
                  class="steps"
                  v-for="item in datas.project_stageroute_object"
                  :key="item.stage_name"
                  :title="item.stage_name"
                  :description="
                    item.start_time.slice(0, 10) +
                    ' 至 ' +
                    item.end_time.slice(0, 10)
                  "
                ></el-step>
              </el-steps>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              prop="mettingItems"
              label="项目会议待确认事项："
              :label-width="baseStyle.width"
            >
              <div v-for="(thing, index) in datas.mettingItems" :key="index">
                <div>
                  {{
                    `${index + 1}、会议时间：${thing.date_time.slice(0, 10)}`
                  }}
                </div>
                <div class="things-item">
                  <span class="item-title">{{ `事项：${thing.content}` }}</span>
                  <i
                    v-if="thing.status === 1"
                    class="el-icon-circle-check"
                    style="color: #67c23a"
                  />
                  <i v-if="thing.status === 0" class="el-icon-circle-close" />
                  <span
                    v-if="
                      thing.status === 0 &&
                      thing.reason &&
                      thing.reason != undefined
                    "
                    class="item-mark"
                    >未通过原因：{{ thing.reason }}</span
                  >
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import baseURL from "@utils/upLoadBaseUrl";
import API from "@apis/newProject";
export default {
  name: "editDetail",
  props: {
    baseStyle: Object,
    datas: Object,
    showsDetail: Boolean,
  },
  data() {
    return {
      baseURL: baseURL.base,
      fileList: [],
    };
  },
  created() {
    this.getMettingList();
    // console.log(this.baseURL.slice(0, -1), "baseURL");

    this.datas.project_file.map((item) => {
      this.fileList.push({
        name: item.name || item.path,
        path: item.path,
        downLoade: this.baseURL.slice(0, -1) + item.path,
      });
    });
  },
  methods: {
    //获取会议列表
    getMettingList() {
      API.getMettingLists(this.datas.project_id)
        .then((res) => {
          this.$set(this.datas, "mettingItems", res.data);
        })
        .catch((err) => this.$message.error(err.message));
    },
    cancel() {
      this.$emit("update:showsDetail", false);
      this.$emit("update:datas", {});
      this.filesData = [];
      this.$refs.editDetail.resetFields();
    },
  },
};
</script>
<style scoped>
.things-item > .item-title {
  padding-right: 20px;
}
.things-item .item-mark {
  padding-left: 20px;
  font-size: 12px;
}
.dev-test > span {
  padding-right: 20px;
}
</style>